<template>
    <li class="item">
        <div>
            <router-link :to="`/playlist/${item.id}`">
            <img :src="item.picUrl?item.picUrl:item.coverImgUrl+'?imageView=1&type=webp&thumbnail=253x0'"></router-link>
            <span>{{item.playCount|formatNum}}万</span>
        </div>
        <router-link :to="`/playlist/${item.id}`">{{item.name}}</router-link>
    </li>
</template>
<script>
export default {
    name:"ListItem",
    props:['item'],
    created(){
        
    },
    filters:{
        formatNum(val){
            return (val/10000).toFixed(2);
        }
    }
}
</script>

<style lang="less" scoped>
    li.item{
        list-style: none;
        
        div{
            position: relative;
            
            span{
                position: absolute;
                right: 5px;
                top: 5px;
                background-image: url();
                background-repeat: no-repeat;
                font-size: 12px;
                color: white;
                text-shadow: 0px 0px 2px black;
                padding-left: 18px;
            }
            img{
                border-radius: 10px;
                width: 100%;
            }
        }
        &>a{
            display: inline-block;
            width: 100%;
            font-size: 13px;
            color: #333;
            text-decoration: none;
            padding: 0px 0px 10px 5px;
            // background-color: violet;
        }
    }
</style>